<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>


<div id="app">
	<input type="button" id="" value="get请求" @click="getinfo" />
	<input type="button" id="" value="post请求" @click="postinfo" />
	<input type="button" id="" value="jsonp请求" @click="jsonpinfo" />
	<p>{{info}}</p>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			info: ''
		},
		methods: {
			// 普通函数写法
			// getinfo() {
			//   this.$http.get('http://ip-api.com/json').then(function (res) {
			//     this.info = res.body.regionName;
			//   })
			// },
			//箭头函数写法
			getinfo() {
				this.$http.get('http://ip-api.com/json').then(res => {
					console.log(res)
					this.info = res;
				})
			},
			postinfo() {
				this.$http.post('http://ip-api.com/json', {}, {
					emulateJSON: true
				}).then(res => {
					console.log(res)
					this.info = res;
				})
			},
			jsonpinfo() {
				this.$http.jsonp('http://ip-api.com/json').then(res => {
					this.info = res;
					console.log(res)
					console.log(res.statusText)
				})
			}
		}
	})
</script>